<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{number}}.{{title}}</title>
    <link rel="stylesheet" href="/css/one_questions.css">
    <!-- 引入ACE插件 -->
    <!-- 引入ACE CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
        charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
        charset="utf-8"></script>
    <!-- 引入jquery CDN -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="navbar">
        <div class="navbar">
            <a href="/">首页</a>
            <a href="/all_questions">题库</a>
            <a href="/ranking.html">排行榜</a>
            <a class="logout" href="javascript:void(0)" onclick="logout()">登出</a>
            <a class="login" href="/login.html">登陆</a>
            <a class="homepage" href="/user.html" id="navUserId">我的主页</a>

        </div>
        </div>
        <!-- 左右呈现，题目描述和预设代码 -->
        <div class="part1">
            <div class="left_desc">
                <h3><span id="number">{{number}}</span>.{{title}}_{{star}}</h3>
                <pre>{{desc}}</pre>
            </div>
            <div class="right_code">
                <pre id="code" class="ace_editor"><textarea class="ace_text-input">{{pre_code}}</textarea></pre>
            </div>
        </div>
        <!-- 提交并且得到结果，并显示 -->
        <div class="part2">
            <div class="result"></div>
            <button class="btn-submit" onclick="submit()">提交代码</button>
        </div>
    </div>
    <script src="/js/auth.js"></script>
    <script>
        //初始化对象
        editor = ace.edit("code");

        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/c_cpp");

        // 字体大小
        editor.setFontSize(16);
        // 设置默认制表符的大小:
        editor.getSession().setTabSize(4);

        // 设置编辑功能（true时只读，用于展示代码）
        editor.setReadOnly(false);

        // 启用提示菜单
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });

        function submit(){
            
            // 1.收集提交时当前页面的有关信息：用户提交的代码和number题号
            var code = editor.getSession().getValue();
            var number = $(".container .part1 .left_desc h3 #number").text();//获取特定数字
            var judge_url = "/judge/" + number;
            
            //2.已经获取到代码和number,构建json,通过ajax向后台发起请求            
            $.ajax({
                method: 'POST',   //对应后端的功能路由
                url: judge_url,   //向后端指定的url发起请求
                dataType: 'json', //告知server,我需要什么格式
                // contentType: 'application/json;charset=utf-8',//告知server,我是什么格式
                data: JSON.stringify({
                    'code': code,
                    'input': ''
                }),
                headers: getAuthHeaders(),
                //成功得到结果后
                success: function(data){
                    show_result(data);
                }
            });

            //3.此时已经拿到后台返回结果，解析并显示到result中
            function show_result(data)
            {
                //拿到result位置
                var result_div = $(".container .part2 .result");
                //清空上一次的结果
                result_div.empty();
                
                //首先拿到结果的状态码和结果描述：这两个数据任何情况都存在
                var status = data.status;//状态码不需要返回给用户
                
                //未登录或token无效
                if(status == 100)
                {
                    var msg = data.msg;
                    var msg_lable = $("<pre>",{
                        text : msg
                    });
                    msg_lable.appendTo(result_div);
                }
                else
                {
                    var desc = data.desc;
                    var desc_lable = $("<pre>",{
                        text : desc
                    });
                    desc_lable.appendTo(result_div);//添加到result结果中
                    if(status == 0)
                    {
                        //stdout,stderr只要在编译运行一切正常时才有
                        //编译运行一切正常，结果通过与否看测试用例通过情况,并将相应结果显示用户
                        var stdout = data.stdout;
                        var stderr = data.stderr;
                        var stdout_lable = $("<pre>",{
                        text : stdout 
                        });
                        var stderr_lable = $("<pre>",{
                        text : stderr
                        });
                        stdout_lable.appendTo(result_div);//添加到result结果中
                        stderr_lable.appendTo(result_div);//添加到result结果中
                    }
                }
            }
        }
    </script>
</body>

</html>